<!DOCTYPE HTML>
<html lang="en-us">
  <head>
    <title>Bonzo Tests</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../node_modules/sink-test/src/sink.css" type="text/css">
    <style type="text/css">
      #fixtures {
        position: absolute;
        top: -9999em;
        width: 1000px; /*for ie<=7*/
      }
      #overflowed {
        overflow: auto;
        width: 50px;
        height: 100px;
        top: 10000px;
        position: absolute;
      }
      #overflower {
        height: 1000px;
        width: 1000px;
      }

      .show-hide-css {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="fixtures">
      <div class="prepend-with-engine"></div>
      <div class="prepend-with-engine"></div>

      <div class="prepend-with-engine-move"></div>

      <div id="class-test" class="existing-class"></div>
      <div id="toggle-class" class="toggle-me"></div>
      <div id="append">
        <div></div>
        <div></div>
      </div>
      <div id="prepend">
        <div id="prepend-a"></div>
        <div id="prepend-b"></div>
      </div>
      <div id="after">
        <div class="after-examples"></div>
        <div class="after-examples"></div>
      </div>
      <div id="before">
        <div class="before-examples"></div>
        <div class="before-examples"></div>
      </div>
      <div id="insert-before">
        <div class="before-target"></div>
      </div>
      <div id="insert-after">
        <div class="after-target"></div>
      </div>
      <div id="insert-after-last"><div class="after-last-target"></div></div>
      <div id="html"></div>
      <p id="html-p"></p>
      <div id="html-select"></div>
      <div id="html-table"></div>
      <div id="text"></div>
      <div id="show-hide" style="width:10px"></div>
      <div id="toggle" style="width:10px"></div>
      <div id="augment" style="color:orange;"></div>
      <div id="empty">
        <p>one</p>
        <p>two</p>
        <p>tre</p>
      </div>
      <div id="detach">
        <div id="detach-a"></div>
        <div id="detach-b"></div>
      </div>
      <div id="attrs">
        <a id="twitter" href="http://twitter.com/">twitter.com</a>
        <a id="hrefrel" href="/relative">relative</a>
        <a id="hrefname" href="#name">name</a>
        <img id="srcabs" src="http://a2.twimg.com/a/1317419607/phoenix/img/twitter_logo_right.png">
        <img id="srcrel" src="/relative">
        <form id="resetme">
          <input type="text" value="eyo">
          <input type="checkbox" checked disabled>
        </form>
      </div>
      <div id="first-last">
        <div id="first"></div>
        <div id="second"></div>
        <div id="last"></div>
      </div>
      <div id="append-to"></div>
      <div id="prepend-to">
        <div id="prepend-first-child"></div>
      </div>
      <div id="sibling-tests">
        <ul>
          <li>zero</li>
          <li class="nextr">one</li>
          <li>two</li>
          <li class="nextr">three</li>
          <li>four</li>
          <li class="nextr">five</li>
        </ul>
      </div>
      <div id="parent-test-wrapper">
        <div id="parent-test"></div>
      </div>
      <div id="checkboxes-bug">
        <input type="checkbox" checked="checked">
        <input type="checkbox" checked="checked">
        <input type="checkbox" checked="checked">
      </div>
      <div id="styles" style="margin-left:5px;"><div style="float: left;"></div></div>
      <div id="callback-styles" data-original="15"></div>
      <div id="data-test" data-foo="bar" data-hoo-haa="true" data-no-hoo-haa="false" data-int="100" data-float="111.11" data-empty="" data-whitespace="   " data-nulltastic="null"></div>
      <div id="data-temp"></div>
      <div id="insertiontasticSource"></div>
      <div id="insertiontastic"></div>
      <div id="clonesrc"><div><p>TEXT</p><span><b>foo</b></span></div><div>second child</div></div>
      <div id="clonedst"></div>
    </div>

    <!-- special fixtures -->
    <div id="overflowed">
      <div id="overflower"></div>
    </div>

    <h1>Bonzo Tests</h1>
    <ol id="tests"></ol>

    <script src="../node_modules/sink-test/src/sink.js"></script>
    <script src="../node_modules/qwery/qwery.js"></script>
    <script src="../node_modules/bowser/bowser.js"></script>
    <script src="../src/bonzo.js"></script>
    <script type="text/javascript">
      bonzo._setQueryEngine = bonzo.setQueryEngine
      bonzo.setQueryEngine = function() {}
    </script>
    <script src="ender-js.js"></script>
    <script type="text/javascript">
      window.ender = $.noConflict()
      window.Q = qwery
    </script>

    <!-- NOTE: selector engine tests go before we mess with the default engine and the rest of the environment-->
    <script src="selectorengine-test.js"></script>
    <script type="text/javascript">
    sink('Post-init', function (test, ok) {
      test('set up test environment', 1, function () {
        window.dom = bonzo
        window.$ = $ = function $(s) {
          return dom(Q(s))
        }
        //dom.setQueryEngine(Q)
        dom.aug(dom, $)
        provide('bonzo', dom)
        ender._select = Q
        ok(true)
      })
    })
    </script>
    <script src="../src/ender.js"></script>
    <!-- we now have an 'ender' object to test on that has Bonzo integrated via the bridge -->

    <script src="misc-test.js"></script>
    <script src="traversal-test.js"></script>
    <script src="layout-test.js"></script>
    <script src="dommanip-test.js"></script>
    <script src="dommanip_insertions-test.js"></script>
    <script src="attributes-test.js"></script>
    <script src="emptycollection-test.js"></script>
    <script src="bridge-test.js"></script>
    <script>
      start()
    </script>
  </body>
</html>
